<template>
  <div class="C_F page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <navbar :title="title"></navbar>
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
        <!-- 搜索框 -->
      <div class="search">
        <van-search shape="round" v-model="value" placeholder="搜索" @search="onSearch" />
      </div>
      <!-- 收藏 -->
      <div class="collection" v-if="collection">
        <div class="c_box" v-for="(item,index) in starData" :key="index">
          <div 
          v-if="!!item.usedCarC"
          @click="goDetail(item.usedCarId)"
          @touchstart="start(item.usedCarId)"
          @touchend="end"
          >
            <div class="stop_title">{{item.usedCarC.storeName}}</div>
            <div class="content">
              <img :src="item.usedCarC.usedCarPicCs[0].picUrl" alt="">
              <div class="content_right">
                <p>{{item.usedCarC.vtdName}}</p>
                <p>{{item.usedCarC.createTime.slice(0,4)}}年{{item.usedCarC.createTime.slice(5,7)}}月 | {{item.usedCarC.odometer}}</p>
                <p>{{item.usedCarC.price/10000}} 万</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 足迹 -->
      <div class="footprint" v-else>
        <div class="f_box" v-for="(item,index) in footDara" :key="index">
          <div 
          @click="goDetail(item.usedCarId)" 
          @touchstart="start(item.usedCarId)"
          @touchend="end"
          >
            <div class="f_shop">
              {{item.usedCarC.storeName}}
            </div>
            <div class="f_content">
              <img :src="item.usedCarC.usedCarPicCs[0].picUrl" alt="">
              <div class="f_content_p">
                <p>{{item.usedCarC.vtdName}}</p>
                <p>{{item.usedCarC.price/10000}}万</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 没有更多了 -->
      <div class="noMore">没有更多了</div>
    </div>
  </div>
</template>

<script>
import { getMyLike, getMyFoot, deleteFootprint, deleteCollection } from './api'
export default {
  data() {
    return {
      collection: '', // true为收藏，flase为足迹
      starData: [],
      footDara: [],
      value: '',
      timeOut: '',
      hasData: true,
      // 获取屏幕状态栏高度
      phoneStatusBarHeight:'',
      title: '我的收藏'
    }
  },
  methods: {
    // 定时器
    setTimeFun(n, val) {
      const nowTime = new Date().getTime()
      this.timeOut = setTimeout(() => {
        if(new Date().getTime() - nowTime >= 1000) {
          let name = this.collection ? '收藏':'足迹'
          if(n===1) {
            this.$dialog.confirm({
              title: `是否删除该${name}`,
            }).then(() => {
              // this.collection? console.log('star',this.starData) : console.log('foot',this.footDara)
              this.$toast.loading({
                message: '加载中...',
                forbidClick: true,
              })
              this.deleteItem(val)
              this.filtration(val)
            })
            return
          }
          this.getSearchData(val)
        }
      }, 1000);
    },
    //长按删除
    start(vId) {
      this.setTimeFun(1, vId)
    },
    end() {
      clearTimeout(this.timeOut)
    },
    // 过滤掉被删除的项
    filtration(vId) {
      if(this.collection) {
        this.starData = this.starData.filter(item => item.usedCarId != vId)
        console.log(this.starData)
        return
      }
      this.footDara = this.footDara.filter(item => item.usedCarId != vId)
    },
    // 跳转到详情页
    goDetail(id) {
      console.log(111)
      this.$router.push({
        name:"secondHandCarDetail",
        query: {id}
      })
    },
    // 搜索 足迹模糊搜索报sql语句出错
    onSearch(val) {
      console.log(val)
      this.setTimeFun(2, val)
    },
    // 获取路由链接上拼接的token值
    getTokenInUrl() {
      var url = window.location.href;
      if (url.indexOf("token") > 0) {
        let getTokenParams = window.location.href.split("token=")[1];
        getTokenParams=getTokenParams.split("&")[0];
        if (getTokenParams.length >= 32) {
          getTokenParams = getTokenParams.substr(0, 32);
          sessionStorage.setItem("token", getTokenParams);
        }
      }
    },
    // 获取收藏 有两个收藏但是查出来的只有一个
    async gatStarData() {
      const {data} = await getMyLike('')
      this.starData = data && [...this.starData, ...data]
      this.starData.forEach(item => {
        console.log(item.usedCarC)
      })
      // console.log('getMyLike22222222222',data)
    },
    // 获取足迹
    async getMyFoot() {
      const {data} = await getMyFoot('')
      this.footDara = data && [...this.footDara, ...data]
      // console.log('getMyFoot1111111111111',data)
    },
    // 删除数据项
    async deleteItem(vId) {
      let data
      this.collection ? data = await deleteCollection(vId) : data = await deleteFootprint(vId)
      data.code === 0 && this.$toast.success('删除成功')
      data.code != 0 && this.$toast('网络异常, 请检查网络')
    },
    // 搜索
    async getSearchData(val) {
      // const data = await searchApi()
      let data
      if(this.collection) {
        this.starData = []
        data = await getMyLike(val)
        data.code == 0 && data.data.length == 0 ? this.starData = data.data : (this.hasData = false, this.starData = data.data)
        return 
      }
      this.footDara = []
      data = await getMyFoot(val)
      data.code == 0 && data.data.length == 0 ? this.footDara = data.data : (this.hasData = false, this.footDara = data.data)
    }
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:white")
  },
  created() {
    // 设置token
    this.getTokenInUrl()
    // 获取屏幕状态栏高度
    this.phoneStatusBarHeight = window.phoneStatusBarHeight
    this.collection = this.$route.query.status == 0 ? false : true
    this.collection ? this.gatStarData() : this.getMyFoot()
    this.collection ? this.title = '我的收藏' : this.title = '我的足迹'
  }
}
</script>

<style scoped lang="less">
  .C_F{
    background-color: white;
    .search{
      z-index: 100;
    }
    // 收藏
    .collection{
      .c_box{
        border: 1px solid #F8F8F8;
        padding: 10px 16px;
        .stop_title{
          // background-color: #F8F8F8;
          // margin-bottom: 5px;
          font-size: 14px;
          color: #999;
        }
        .content{
          display: flex;
          align-items: center;
          height: 100px;
          // background-color: coral;
          img{
            width: 110px;
            height: 90px;
            background-color: cover;
            margin-right: 16px;
            border-radius: 5px;
          }
          .content_right{
            font-size: 14px;
            p:nth-child(1) {
              font-weight: 550;
            }
            p:nth-child(2) {
              padding: 5px 0;
              color: #666;
            }
            p:nth-child(3) {
              color: #FF571A;
              font-size: 16px;
              font-weight: 550;
            }
          }
        }
      }
    }
    // 足迹
    .footprint{
      display: flex;
      flex-wrap: wrap;
      border-top: 1px solid #F8F8F8;
      .f_box:nth-child(odd){
        padding: 10px 8px 10px 16px;
      }
      .f_box:nth-child(even){
        padding: 10px 16px 10px 8px;
      }
      .f_box{
        width: calc(~"50% - 24px");
        .f_shop{
          color: #999;
          font-size: 14px;
          margin-bottom: 5px;
        }
        .f_content{
          text-align: center;
          img{
            width: 100%;
            height: 100px;
            border-radius: 5px;
          }
          .f_content_p{
            text-align: left;
            font-size: 14px;
            p:nth-child(1) {
              margin: 5px 0;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            p:nth-child(2) {
              color: #FF571A;
              font-weight: 550;
            }
          }
        }
      }
    }
    // 没有更多了
    .noMore {
      padding-top: 20px;
      text-align: center;
      font-size: 16px;
      color: #969799;
    }
  }
</style>